<!--
 * @Author: windys
 * @Description: 选择sku
 * @Date: 2022-03-23 09:16:16
-->

<template>
  <van-action-sheet v-model:show="show" title="选择规格">
    <div class="content">
      <div class="address">
        <van-icon name="location-o" class="icon" />
        <div class="right">
          <div>{{ addr[0].name }} &nbsp; 电话：{{ addr[0].mobile }}</div>
          <div>{{ addr[0].address }}{{ addr[0].addr }}</div>
        </div>
      </div>

      <div class="sku_cover">
        <van-image
          :src="chooseSku ? chooseSku.imgUrl : ''"
          width="100"
          height="100"
          fit="contain"
        />
      </div>

      <div class="sku" v-if="skuData.skuList && skuData.skuList.length">
        <van-tag
          type="danger"
          class="suk_item"
          v-for="(el, index) in skuData.skuList"
          :key="el.skuId"
          size="large"
          @click="handleSku(el, index)"
          :plain="active != index"
          >{{ el.attrs }}</van-tag
        >
      </div>

      <div class="yunfei">
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
          <template #tip>
            您当前地址邮寄运费：{{
              skuData.freight ? skuData.freight + "元" : "包邮"
            }}
          </template>
        </van-submit-bar>
      </div>
    </div>
  </van-action-sheet>
</template>

<script>
import { Toast } from "vant";
import { defineComponent, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ApiGetMallOrderId, ApiPayMallOrder } from "../../../api/mall";
import { is_weixin } from "@/utils";
export default defineComponent({
  setup() {
    const show = ref(false);
    const addr = ref({});
    const skuData = ref({});
    const active = ref(null);
    const chooseSku = ref(null);

    const handleSku = (el, index) => {
      chooseSku.value = el;
      active.value = index;
    };

    const route = useRoute();
    const router = useRouter();
    const onSubmit = async () => {
      if (!chooseSku.value) {
        Toast.fail("请选择规格");
        return false;
      }
      console.log(JSON.parse(route.query.item));
      const res1 = await ApiGetMallOrderId({
        subjectId: JSON.parse(route.query.item).goodsId, //券ID或第三方商品I
        name: JSON.parse(route.query.item).name, //
        num: 1,
        rmb: JSON.parse(route.query.item).sellPrice,
        clientOs: window.ipAddress,
        type: JSON.parse(route.query.item).type,
      });
      if (res1 && typeof res1 != "number") {
        if (is_weixin()) {
          const res2 = await ApiPayMallOrder({
            orderId: res1,
            payType: 30,
            whichPay: 2,
            clientOs: window.ipAddress,
            isQr: 3,
          });
          if (typeof res2 === "object") {
            wx.config({
              debug: false, // 开启调试模式,
              appId: res2.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
              timestamp: res2.timestamp, // 必填，生成签名的时间戳
              nonceStr: res2.nonce_str, // 必填，生成签名的随机串
              signature: res2.sign, // 必填，签名
              jsApiList: ["chooseWXPay"],
            });
            wx.chooseWXPay({
              appId: res2.appid,
              nonceStr: res2.nonce_str,
              package: "prepay_id=" + res2.prepay_id,
              signType: "MD5",
              timestamp: res2.timestamp,
              paySign: res2.sign,
              success: function (res) {
                Toast.success("支付成功");
                router.push({
                  path: "/mallRes",
                  query: {
                    id: res1,
                  },
                });
              },
              cancel: function (res) {
                Toast.fail("支付已取消");
              },
              fail: function (res) {
                Toast.fail("支付失败");
              },
            });
          }
        } else {
          const res2 = await ApiPayMallOrder({
            orderId: res1,
            payType: 30,
            whichPay: 2,
            clientOs: window.ipAddress,
            isQr: 2,
          });
          if (typeof res2 === "object") {
            let urls = res2.mweb_url;
            let redirect_url = encodeURIComponent(
              `http://www.caihuapp.com/v3mobile/#/mallRes?id=${res1}`
            );
            let url = urls + `&redirect_url=${redirect_url}`;
            location.href = url;
          }
        }
      }
    };
    return {
      active,
      chooseSku,
      show,
      addr,
      skuData,
      handleSku,
      onSubmit,
    };
  },
});
</script>
<style scoped lang='scss'>
.content {
  min-height: 300px;
  width: 95%;
  margin: 0 auto;
  font-size: 12px;
  .address {
    display: flex;
    height: 50px;
    align-items: center;
    .icon {
      font-size: 30px;
      color: #ffa600;
    }
    .right {
      width: 100%;
      padding: 0 15px;
      font-size: 14px;
      color: #4e4c4c;
      div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .sku_cover {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
  .sku {
    margin: 20px 0;
    margin-bottom: 100px;
    .suk_item {
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }
}
</style>